<script setup lang="ts">
import { getMessageWordsAPI } from '@/api/message'
import { Toast } from 'vant';
import { inject, onMounted, provide, reactive } from 'vue';
import TalkWordsAdd from './TalkWordsAdd.vue'
import TalkWordsManage from './TalkWordsMange.vue'

    const state = reactive({
        list: [],
        loading: false,
        addBool: false,
        manageBool: false
    })
    // 接收顶层组件的worksChange方法
    const { worksChange } = inject('popup')

    // 获取常用语
    const getMessageWords = async() => {
        state.loading = true
        const res = await getMessageWordsAPI()        
        if (res) {
            state.list = res.data
        }else{
            Toast(res.msg)
        }
        state.loading = false
    }
    onMounted(() => {
        getMessageWords()
    })
    // 关闭 添加弹框
    const closeWorksAdd = () => {
        state.addBool = false
        // 更新列表
        getMessageWords()
    }
    // 关闭 管理弹框
    const closeWordsManage = () => {
        state.manageBool = false
        // 更新列表
        getMessageWords()
    }
    provide('popup', {
        closeWorksAdd,
        closeWordsManage,
    })
</script>

<template>
    <div class="talk-word">
        <dl>
            <dt 
                v-for="(item,index) in state.list"
                :key="index"
                @click="worksChange(item.text)"
            >
            {{ item.text }}
            </dt>
        </dl>
        <div class="talk-word-btn">
            <p @click="state.addBool=true"><img src="@/assets/img/icon/icon-add.png">添加</p>
            <i></i>
            <p @click="state.manageBool=true"><img src="@/assets/img/icon/icon-file.png" >管理</p>
        </div>
         <!--  常用语添加 弹窗 -->
         <van-popup 
            v-model:show="state.addBool" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <TalkWordsAdd />
        </van-popup>
         <!-- 切换管理 弹窗 -->
         <van-popup 
            v-model:show="state.manageBool" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <TalkWordsManage />
        </van-popup>
    </div>
</template>
<style scoped>
  dl{
    height: 8.7rem;
    margin: 0 0.85rem;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    overflow: auto;
  }
  dl dt{
    font-size: 0.75rem;
    font-weight: 300;
    color: #030303;
    line-height: 1.12rem;
    padding: 1rem 0.21rem;
    border-bottom: 1px solid #eeeeee;
    text-align: left;
  }
  dl dt:last-child{
    border-bottom: 0;
  }
  .talk-word{
    height: 12rem;
  }
  .talk-word-btn{
    display: flex;
    margin-top: 1rem;
  }
  .talk-word-btn p{
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 300;
    color: #030303;
  }
  .talk-word-btn p img{
    width: 0.91rem;
    height: 0.91rem;
    margin-right: 0.29rem;
  }
  .talk-word-btn i{
    width: 0.03rem;
    height: 0.85rem;
    background: #EFEFEF;
    display: inline-block;
  }
</style>